<!-- 搜索表单 -->
<template>
  <div class="search">
    <el-form
      v-show="isCollapse"
      ref="search-form"
      :model="formData"
      :size="size"
      :inline="inline"
      :label-width="labelWidth"
      :rules="rules"
      :label-position="labelPosition"
    >
      <el-row>
        <el-col v-for="item in formConfig" :key="item.prop" :span="6">
          <el-form-item
            :prop="item.prop"
            :label="item.label"
          >
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="formData[item.prop]"
              :style="{ width: item.width }"
              :maxlength="item.maxLength"
              :placeholder="item.placeholder"
              :type="item.limit"
            />
            <!-- 下拉框 -->
            <el-select
              v-if="item.type === 'Select'"
              v-model="formData[item.prop]"
              :multiple="item.multiple"
              :style="{ width: item.width }"
              :placeholder="item.placeholder"
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <!-- 多选下拉框 -->
            <multiple-selector
              v-if="item.type === 'multipleSelector'"
              v-model="formData[item.prop]"
              :options="cities || item.options"
              placeholder="全部"
            />
          </el-form-item>
        </el-col>
        <el-form-item class="form-operate">
          <!-- <el-button
            v-for="item in handler"
            :key="item.prop"
            :type="item.type"
            :icon="item.icon"
            :size="item.size || size"
            :style="{ marginLeft:item.prop=='submit'? '30px': ''}"
            :loading="$attrs.exporting===item.label"
            @click="switchEvent(item)"
          >
            {{ item.label }}
          </el-button> -->
          <el-button
            v-debounce="onSumitFrom"
            type="primary"
            class="btn"
            icon="el-icon-search"
          >查询</el-button>
          <el-button
            v-debounce="onResetForm"
            type="default"
            icon="el-icon-refresh-right"
            class="btn"
          >重置</el-button>
          <el-button
            v-debounce="onExportFile"
            type="success"
            class="btn"
            icon="el-icon-download"
            :loading="$attrs.exporting==='导出汰换清单'"
          >
            导出汰换清单
          </el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <div class="search-footer" @click="onChangeCollapse">
      <i
        :class="[
          isCollapse ? 'el-icon-caret-top' : 'el-icon-caret-bottom',
          'collapse-title'
        ]"
      />
      {{ isCollapse ? "收起面板" : "展开面板" }}
    </div>
  </div>
</template>

<script>
import MultipleSelector from '@/components/common/MultipleSelector';
import { listByRight } from '@/api/replacementApi';
export default {
  name: 'SearchForm',
  components: {
    MultipleSelector
  },
  props: {
    inline: {
      type: Boolean,
      default: true
    },
    // 标签宽
    labelWidth: {
      type: String,
      default: '114px'
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    // 表单大小
    size: {
      type: String,
      default: 'small'
    },
    // 表单配置项,例如：
    formConfig: {
      type: Array,
      required: true,
      default: () => [
        { type: 'Input', label: '条件1', prop: 'key1', width: '180px', placeholder: '请输入条件1...' },
        { type: 'Input', label: '条件2', prop: 'key2', width: '180px', placeholder: '请输入条件2...' }
      ]
    },
    // 表单查询条件数据项
    formData: {
      type: Object,
      // required: true,
      default: () => ({
        cities: [],
        cityEliApprovalStatus: null,
        commodityCodes: null,
        commodityNames: null,
        isOwnBrand: null,
        lastMonEliminating: null,
        regionEliApprovalStatus: null,
        returnMark: null
      })
    },
    // 是否需要初始化数据
    isInitData: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Object,
      default: () => {}
    }
    // // 表单处理事件
    // handler: {
    //   type: Array,
    //   default: () => [
    //     { label: '查询', prop: 'submit', type: 'primary', eventName: 'onSubmit', icon: 'el-icon-search' },
    //     { label: '重置', prop: 'reset', type: 'default', eventName: 'onReset', icon: 'el-icon-refresh-right' },
    //     { label: '导出汰换清单', prop: 'import', type: 'success', eventName: 'onExportFile', icon: 'el-icon-download' }
    //   ]
    // }
  },
  inject: ['getSearchPanel', 'countTableHeght'],
  data() {
    return {
      isCollapse: true,
      cities: []
    };
  },
  computed: {
    searchPanel() {
      return this.getSearchPanel();
    }
  },
  watch: {
    searchPanel: {
      deep: true,
      handler(val) {
        this.isCollapse = val.collapse;
        this.$nextTick(() => this.countSearchPanelHeight());
      }
    }
  },
  mounted() {
    this.onFetchDict();
    // 初始化时，是否需要请求接口加载数据
    this.$nextTick(() => {
      this.countSearchPanelHeight();
      if (this.isInitData) this.$emit('onSubmit', this.formData);
    });
  },
  methods: {
    // 字典接口
    onFetchDict() {
      listByRight({}).then(({ data, resultCode, resultMessage }) => {
        if (resultCode === '0000' && data) {
          this.cities = data.map(item => {
            return {
              name: item.name,
              value: item.city
            };
          });
        }
      });
    },
    // // 切换事件
    // switchEvent({ prop, eventName, label }) {
    //   switch (prop) {
    //     case 'submit':
    //       return this.onSumitFrom(eventName);
    //     case 'reset':
    //       return this.onResetForm(eventName);
    //     default:
    //       return this.onBtnEvent(eventName, label);
    //   }
    // },
    // 提交表单
    onSumitFrom() {
      this.$refs['search-form'].validate((valid) => {
        if (valid) this.$emit('onSubmit', this.formData);
      });
    },
    // 重置表单
    onResetForm() {
      this.$refs['search-form'].resetFields();
      this.$emit('onReset', this.formData);
    },
    // 导出表单
    onExportFile() {
      this.$emit('onExportFile', { name: '导出汰换清单' });
    },
    // // 其他按钮事件
    // onBtnEvent(eventName, label) {
    //   this.$refs['search-form'].validate((valid) => {
    //     this.$emit(eventName, { formData: this.formData, name: label });
    //   });
    // },
    onChangeCollapse() {
      this.isCollapse = !this.isCollapse;
      this.$nextTick(() => this.countSearchPanelHeight());
    },
    countSearchPanelHeight() {
      const cardHeight = this.$refs['search-form'].$el.clientHeight + 80;
      this.countTableHeght(cardHeight);
    }
  }
};
</script>
<style lang="scss" scoped>
.search{
  padding: 20px 0 0;
  &:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    position: absolute;
    background: #eee;
    left: 0;
}
  ::v-deep el-form-item__content{
    width: 120px;
  }
  ::v-deep .el-form--inline .el-form-item, .el-select{
    display: block;
    margin-right: 0;
  }
  ::v-deep .el-form--inline .el-form-item__label{
    float: left;
  }
  ::v-deep .el-form--inline .el-form-item__content{
    display: block;
    margin-left: 114px;
  }
  .form-operate {
    display: block;
    float: right;
    .btn {
      display: inline-block;
    }
    ::v-deep .el-form-item__content{
      display: block;
      margin-left: 10px;
    }
  }
  .search-footer {
    position: relative;
    height: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    color: #d3dce6;
    cursor: pointer;
    top: -10px;
  }
  .search-footer:hover {
    color: #409eff;
  }
}
</style>
